<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}

import type { VNode, Component } from "vue"
import { onMounted, ref, defineEmits, defineProps, useSlots, computed } from 'vue';
import Box from '../Box/index.vue'
import Bottom from '../Bottom/index.vue'
/**
 * @property 变量
 */
//插槽信息
const slot = useSlots();
const props = defineProps({
    show: {
        type: Boolean,
        default: () => false
    },
    title: {
        type: String,
        default: () => ''
    },
    center: {
        type: String,
        default: () => ''
    },
    closeText: {
        type: String,
        default: () => '取消'
    },
    closeBgColor: {
        type: String,
        default: () => '#DBFFF2'
    },
    closeColor: {
        type: String,
        default: () => '#00BD78'
    },
    confirmText: {
        type: String,
        default: () => '确定'
    },
    confirmBgColor: {
        type: String,
        default: () => '#00BD78'
    },
    confirmColor: {
        type: String,
        default: () => '#fff'
    },
    bgColor: {
        type: String,
        default: () => '#fff'
    },
    isCloseBut: {
        type: Boolean,
        default: () => true
    },
    isConfirmBut: {
        type: Boolean,
        default: () => true
    },
    slot: {
        type: Boolean,
        default: () => false
    }
});
const emits = defineEmits(['close', 'confirm']);

/**
 * @property  所有请求以api开头 如:apiDataInfo
 * / 


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */


/**
 * @property 内置方法
 */
const showSlot = computed(() => {
    return slot && slot.center
})

</script>
<template>
    <up-popup :show="props.show" mode="center" round="12">
        <Box :is-title="false" class-name="w680 relative" :style="{
            borderRadius: '20rpx',
            marginTop: '0rpx',
            backgroundColor: 'transparent',
        }">
            <div class="font-size-48 fw-500 text-center">
                {{ props.title }}
            </div>
            <slot name="center" />
            <div class="font-size-28 mt-3.5 c-[#A7A7A7] min-h-100" v-if="!showSlot">
                {{ props.center }}
            </div>
            <div class="absolute flex bottom-28 justify-center fc w-[100%] ml--3.5 pl-38rpx pr-38rpx justify-between">
                <Bottom :text="props.closeText" :style="{
                    background: props.closeBgColor,
                    color: props.closeColor,
                    width: '240rpx',
                    height: '80rpx',
                }" v-if="props.isCloseBut" @click="emits('close')" />
                <Bottom :text="props.confirmText" :style="{
                    background: props.confirmBgColor,
                    color: props.confirmColor,
                    width: '240rpx',
                    height: '80rpx',
                }" v-if="props.isCloseBut" @click="() => { emits('confirm'); emits('close') }" />
            </div>
            <div class="h-80 mt-3.5">

            </div>
        </Box>
    </up-popup>
</template>
<style lang="scss" scoped></style>